<div class="row">
    <div class="col-sm-8 col-sm-offset-2">

        <div id="form-container">

            <div class="page-header text-center">
                <h2>Let's Be Friends</h2>

                <!-- the links to our nested states using relative paths -->
                <!-- add the active class if the state matches our ui-sref -->
                <div id="status-buttons" class="text-center">
                    <a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a>
                    <a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
                    <a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
                </div>
            </div>

            <!-- use ng-submit to catch the form submission and use our Angular function -->
            <form id="signup-form" ng-submit="processForm()">
                <!-- our nested state views will be injected here -->
                <div id="form-views" ui-view></div>
            </form>

        </div>

        <!-- show our formData as it is being typed -->
  <pre>
    {{ formData }}
  </pre>

    </div>
</div>